<template>
  <section id="vipRule">
    <bigHeader bgColor="#7c4900" :growthValue="Number(queryData.point || '0')" :scoreText="ranksFormated" :vipRank="vipRank" :vbean="queryData.bean" :name="queryData.name">
      <section :style="{background: 'url(' + level +')'}" slot="main-img" class="header">
        {{queryData.rank == "" ? "无等级" : `${queryData.rank}会员`}}
      </section>
    </bigHeader>

    <!-- 我的权益 -->
    <section class="rule-list">
      <div class="list-title">
        <h4>我的权益</h4>
        <span @click="goToRights(vipData)">更多&gt;</span>
      </div>
      <ul class="list-content" v-if="queryRightList.length">
        <li v-for="(item, index) in queryRightList" :key="index">
          <div class="img" :style="'background-image:url('+item.logo+')'"></div>
          <div class="name">{{item.name}}</div>
        </li>
      </ul>
      <div v-if="!queryRightList.length" class="v-mall-list-none">当前会员等级没有对应的权益哦！</div>
    </section>

    <!-- v豆兑换 -->
    <section class="rule-list">
      <div class="list-title">
        <h4>V豆兑换</h4>
        <span @click="activeToVMall">更多&gt;</span>
      </div>
      <ul class="list-content" v-if="productsVMall.length">
        <li v-for="(item, index) in productsVMall" :key="index">
          <div :style="'background-image:url('+(item.image ? addPath(item.image) : defaultUser) +')'"></div>
          <p>{{item.name}}</p>
        </li>
      </ul>
      <div v-if="!productsVMall.length" class="v-mall-list-none">暂时没有可以兑换的商品哦！</div>
    </section>
  </section>
</template>

<script>
import Vue from "vue";
import bigHeader from "components/big-header.vue";
import grids from "components/grids.vue";
import grid from "components/grid.vue";
import level from "assets/level.png";
import right1 from "assets/right1.png";
import right2 from "assets/right2.png";
import right3 from "assets/right3.png";
import right4 from "assets/right4.png";
import defaultUser from "assets/default_user_icon.png";
import loadMore from "components/loadmore.vue";
//service
import QueryUserRankInfoService from "services/vBuy/QueryUserRankInfo";
import QueryRightsService from "services/vBuy/QueryRights";
import QueryProductListService from "services/vBuy/QueryProductList";

let query = {
  pageNumber: 1,
  pageSize: 10
};

let loading = false;

// 获取我的权益积分等详情
function _getRights() {
  if (loading) {
    return;
  }
  loading = true;
  return new Promise(function (resolve, reject) {
    QueryUserRankInfoService.bind(Vue.prototype)({
      pageable: query
    },
      resp => {
        query.pageNumber++;
        loading = false;
        resolve(resp);
      });
  });
}

// 查询我的权益等级可享受的权益
function _getQueryRight(vm) {
  return new Promise(function (resolve, reject) {
    QueryRightsService.bind(vm)(
      {},
      resp => {
        resolve(resp);
      },
      (err, resultCode) => {
        reject(err, resultCode);
      }
    );
  });
}

// 获取v豆商品
let queryV = {
  index: 0,
  count: 5
};

// 获取可兑换商品列表
function loadMoreV(vm, type) {
  QueryProductListService.bind(vm)(
    {
      type: type || "0",
      index: queryV.index.toString(),
      count: queryV.count.toString(),
      isBeanExchange: "1"
    },
    resp => {
      // queryV.index = queryV.index + queryV.count;
      vm.queryDataVMall = resp;
      console.log(resp);
      vm.productsVMall = vm.productsVMall.concat(resp.products);
      console.log(vm.productsVMall);
      if (resp.products.length < queryV.count) {
        vm.allLoaded = true;
      }
    }
  );
}
export default {
  components: {
    bigHeader,
    grids,
    grid,
    loadMore
  },
  methods: {
    getRightsList() {
      _getQueryRight(this).then(resp => {
        resp.rightsCategorys.forEach(data => {
          data.logo = this.addPath(data.logo);
          this.queryRightList.push(data);
        });
        console.log(this.queryRightList);
      });
    },
    // 获取V豆兑换, 产品列表
    getVMallList() {
      loadMoreV(this);
    },
    // V豆 更多->跳转至商城
    activeToVMall() {
      if (this.$.appname !== 'cn.carowl.vfuhuizhong') {
        let query = {
          name: "sg_goodsList",
          query: {
            isVBean: true
          }
        };
        this.$router.push(query);
      }
    },
    //会员权益 新
    goToRights(rank) {
      console.log(rank);
      this.$router.push({
        name: "vb_vipRights",
        params: {
          vipRank: String(rank) || null
        }
      });
    }
  },
  created() {
    this.getRightsList();
    this.getVMallList();
  },
  data() {
    return {
      allLoaded: false,
      level,
      query: query,
      queryData: {},
      ranksFormated: [],
      vipRank: 0,
      rankNum: [],
      queryRightList: [],
      queryDataVMall: {},
      productsVMall: [],
      vipData: "",
      defaultUser: defaultUser
    };
  },
  beforeRouteEnter(to, from, next) {
    _getRights().then(resp => {
      next(vm => {
        let _index;
        vm.queryData = resp;
        console.log(vm.queryData);
        if (vm.queryData.ranks && vm.queryData.ranks.length > 0) {
          vm.queryData.ranks.forEach((val, index) => {
            if (vm.queryData.rank === val.name) {
              // 建议:id比name用来作主键更好(暂未修改)
              // 获取当前VIP等级, 在集合中的index, 在查询更多权益的时候, 作初始化数据
              // 注意: ListRankRights(更多权益->vb_vipRights页面), 与QueryUserRankInfo(当前页面),查出的Ranks, 顺序是相反的
              // vm.vipData = vm.queryData.ranks.length - index - 1;
              vm.vipData = index
              _index = index;
              console.log(vm.vipData);
            }

            vm.ranksFormated.push({
              name: val.name, // vip名称
              score: val.point, // vip等级分数区间
              color: "#fff"
            });
          });

          // 会员当前无等级, 则_index为undefined, 指定index为-1
          _index = _index == undefined ? -1 : _index;

          // 是否满级了?
          if (
            Number(vm.queryData.point || "0") >=
            vm.ranksFormated[vm.ranksFormated.length - 1].score
          ) {
            vm.vipRank = vm.ranksFormated[vm.ranksFormated.length - 1].score;
          } else {
            vm.vipRank = vm.ranksFormated[_index + 1].score;
          }

          if (resp.integralDetails.length < query.pageSize) {
            vm.allLoaded = true;
          }
        }
      });
    });
  }
};
</script>

<style lang="scss">
@mixin border {
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  border-bottom: 1px solid #d9d9d9;
  color: #d9d9d9;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}

#vipRule {
  .divide {
    border: none;
  }
  .main_title {
    padding: 10px;
    font-weight: normal;
    position: relative;
    &::after {
      @include border;
    }
  }
  .grid {
    border: none;
    &::before {
      display: none;
    }
    &::after {
      display: none;
    }
    img {
      width: 70% !important;
      margin-bottom: 5px;
    }
    color: black;
  }
  .header {
    height: 90px;
    width: 100%;
    background-size: cover !important;
    background-repeat: no-repeat;
    line-height: 115px;
    font-size: 1.1rem;
    color: #fff;
    padding-top: 0.8rem;
  }
  .main-img {
    text-align: center;
    /*width: 40% !important;*/
    width: 140px !important;
  }
  .title {
    padding: 10px 10px 4px 20px;
    font-weight: normal;
    position: relative;
    &::after {
      @include border;
    }
    &::before {
      content: "|";
      position: absolute;
      font-weight: bold;
      transform: scaleX(1.5);
      left: 10px;
      color: red;
    }
  }
  .record {
    padding: 10px;
    position: relative;
    h5 {
      height: 30px;
      line-height: 15px;
      font-weight: normal;
      font-size: 1.2rem;
    }
    &::after {
      @include border;
    }
  }
  .header-progress-score {
    color: #fff;
    text-align: center;
    margin-top: -1rem;
    padding-bottom: 0.6rem;
    font-size: 1.2rem;
    span {
      color: #f98700;
    }
  }
  .vip-rule-distance {
    color: #f2efec;
    font-size: 1rem;
    padding: 0.5rem 0 0.5rem 1.2rem;
  }
  .rule-list {
    width: 100%;
    margin-top: 1rem;
    border-top: 3px solid #b8b8b8;
    border-bottom: 3px solid #b8b8b8;
    padding: 0.5rem 1rem;
    .list-title {
      overflow: hidden;
      h4 {
        margin-top: 0.2rem;
        font-size: 1.2rem;
        float: left;
        font-weight: normal;
      }
      span {
        float: right;
      }
    }
    .list-content {
      margin-top: 2rem;
      overflow: hidden;
      li {
        display: flex;
        padding: 4px;
        .img {
          width: 3em;
          height: 3em;
          background-size: cover;
        }
        .name {
          display: flex;
          align-items: center;
          border: 1px solid #eee;
          margin-left: 1em;
        }
        p {
          line-height: 1.5rem;
        }
      }
    }
    .v-mall-list-none {
      margin-top: 1rem;
      height: 5rem;
      text-align: center;
      line-height: 3rem;
      font-size: 1.1rem;
    }
  }
}
</style>
